{% extends 'base.html' %}
{% block title %}Welcome to shape esimation practice!{% endblock %}

{% block content %}
<p>
In this practice, you need to adjust a "gauge" to indicate the surface normal direction. Here is what is normal from wiki <a href="https://en.wikipedia.org/wiki/Normal_%28geometry%29"> Normal </a>.
A gauge is a circular disk with a normal direction indicator. 
</p>
<img src="{{ STATIC_URL }}images/gauge_example.jpg" alt = "a gauge example" width = "390" height = "225" />
<p>
The above picture shows an example of which is good and which is bad for using a gauge to indicate the surface normal direction.
In the picture, the specified surface normal is facing right, so the left gauge is a good indicator. On the other hand, the right gauge is a bad indicator since its direction pointing to
the front.
</p>

</p>
<img src="{{ STATIC_URL }}images/circular_disk.jpg" alt = "a circular disk gauge example" width = "300" height = "300" />
<p>
<p>
Circular disk on the upper right of the appears good,  but the one on the lower left does not.
</p>	

<p>
There are two practising objects:
</p>
<a href = "http://www.shape-practice.appspot.com/practice_sphere/"> Sphere</a>
<p>
</p>
<a href = "http://www.shape-practice.appspot.com/practice_s1/"> Arbitrary Object</a>
<p>
You can use your mouse to adjust two angles of the gauge direction. The two angles are polar angle and azimuth angle. They are explained in 
wiki <a href = "http://en.wikipedia.org/wiki/Spherical_coordinate_system"> Spherical coordinate system</a>. Don't worry if you are confused by 
those math, just rorate the gauge into the normal's direction.
</p>
You have two ways to adjust the gauge direction:
<p>
1. Left click the mouse and keep it pressed, and move around the center of the gauge. It will adjust the azimuth angle.
</p>
<p>
2. Adjust the middle button of your mouse to adjust the polar angle.
</p>
<p>
You will be conducted to use one of those method or both of them in the practice.
</p>
{% endblock %}
